<template>
  <div id="Home">
    <router-link :to="item.to" class="item" v-for="(item, index) in routerData" :key="index">
      <span class="name">{{index+1}}、{{item.name}}</span>
      <span class="desc">{{item.desc}} </span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      routerData: [
        {
          name: '父子组件调用实例',
          desc: '父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签<child>的形式嵌进父组件了。',
          to: 'fatherAndChild'
        },
        {
          name: '探讨vue的双向绑定原理及实现',
          desc: 'vue的双向绑定是由数据劫持结合发布者－订阅者模式实现的，那么什么是数据劫持？vue是如何进行数据劫持的？',
          to: 'dataBindView'
        },
        {
          name: '一些CSS样式的小demo',
          desc: '今天在社区看到一些很有趣的css样式，发现CSS真有趣，来做一些小测试',
          to: 'css'
        },
        {
          name: '关于watch相关的小 demo',
          desc: 'watch虽然经常使用，但是却并没有深入的去了解过其真正的原理，做一些小demo练练手',
          to: 'watcher'
        },
        {
          name: '关于es6相关的import、export',
          desc: '同学问我的一个关于es6的module的引入相关问题',
          to: 'import'
        },
        {
          name: '关于js手写一个CSS的ease-in的效果',
          desc: '为了减少外部插件，就顺便直接手写了一个关于按钮点击返回顶部的效果',
          to: 'totop'
        },
        {
          name: '关于Filter的使用方法',
          desc: '过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式',
          to: 'filter'
        },
        {
          name: '关于Vue中不能检测数组的某些方法的问题',
          desc: '在看vue文档的时候，发现有说vue不能检测某些数组值的变动，于是来测测这个东西',
          to: 'testarr'
        },
        {
          name: '关于Slot的使用方法',
          desc: '在Vue.js的高级API中，有涉及到关于用户自定义的内容地方就可以直接使用slot标签',
          to: 'slot'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
#Home {
  width: 1200px;
  zoom: 1;
  &:before {
    content: '';
    display: table;
  }
  &:after{
    content: '';
    display: table;
    clear: both;
  }
  .item {
    padding: 10px 20px 10px 0;
    width: 48%;
    float: left;
    border-bottom: 1px solid #282c34;
    &:nth-child(2n){
      float: right;
      padding: 10px 0 10px 0;
    }
    .name {
      font-size: 18px;
      color: #333;
      display: block;
      font-weight: bold;
      &:hover {
        color: #22a4ff;
      }
    }
    .desc {
      display: block;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
